<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: #c7bf7b;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        table,
        td,
        th {
            border: 1px solid;
        }

        div {
            background-color: #fff;
            padding: 30px;
            border-radius: 18px;
        }
    </style>
</head>

<body>
    <div>
        <table>
            <tr>
                <h3>添加博客或修改</h3>
            </tr>
            <tr>
                <td>标题：</td>
                <td><input type="text" placeholder="请输入标题" id="title"></td>
            </tr>
            <tr>
                <td>摘要:</td>
                <td><input type="text" placeholder="请输入标题" id="digest"></td>
            </tr>
            <tr>
                <td>内容:</td>
                <td><input type="text" placeholder="请输入标题" id="text"></td>
            </tr>
            <tr>
                <td>分类:</td>
                <td><input type="text" placeholder="请输入标题" id="classify"></td>
            </tr>
            <tr>
                <td>作者:</td>
                <td><input type="text" placeholder="请输入标题" id="author"></td>
            </tr>
            <tr>
                <td>
                    <input type="button" value="保存" onclick="Save()">
                    <input type="button" value="取消" onclick="Back()">
                </td>
            </tr>
        </table>
    </div>

    <script src="./js/jquery-3.6.0.min.js"></script>
    <script src="./js/fn.js"></script>
    <script>
        let id = window.location.search.split('=')[1] || '';
        $(() => {
            if (id) {
                $.get('http://localhost:8080/blog', (res) => {
                    res.forEach(item => {
                        if (item.id == id) {
                            $('[id = title]').val(item.title);
                            $('[id = digest]').val(item.digest);
                            $('[id = text]').val(item.text);
                            $('[id = classify]').val(item.classify);
                            $('[id = author]').val(item.author);
                        }
                    });
                })
            }
        })
    </script>
</body>

</html>